<template>
<div>
    <div class="banner" @click="handleClick">
      <img class="banner-img" :src="list.bannerImg"/>
      <div class="banner-info">
          <div class="banner-title">
             {{list.sightName}}
          </div>
          <div class="banner-number">
              <span class="iconfont banner-icon">&#xeac4;</span>
              {{blength}}
          </div>
      </div>
    </div>
    <common-gallary  :imgs="list.gallaryImgs" v-show="showGallary" @close="handleClick"></common-gallary>
</div>
</template>

<script>
import CommonGallary from 'common/gallary/Gallary.vue'
export default {
  name: 'DetailBanner',
  components: {
    CommonGallary
  },
  props: {
    list: Object,
    blength: Number
  },
  data () {
    return {showGallary: false
    }
  },
  methods: {
    handleClick () {
      this.showGallary = !this.showGallary
    }
  }
}
</script>

<style lang="stylus" scoped>
.banner
    position:relative
    overflow:hidden
    height:0
    padding-bottom :33%
    .banner-img
     width:100%
    .banner-info
     position:absolute
     background-image:linear-gradient(top,rgba(0,0,0,0),rgba(0,0,0,0.8))
     text-align:center
     display :flex
     left:0
     right:0
     bottom :0
     line-height:.6rem
     color:#eee
     .banner-title
       flex:1
     .banner-number
      padding:0 .4rem
      height :.4rem
      line-height:.4rem
      border-radius:.2rem
      background:rgba(0,0,0,.8)
      font-size :.24rem
       .banner-icon
        font-size:.24rem
</style>
